<template>
  <el-button plain @click="dialogFormVisible_template = true">加载BI模板</el-button>
  <el-button plain @click="dialogFormVisible_datasetList = true">加载外部数据集</el-button>
  <el-button plain @click="dialogFormVisible_datas = true">加载外部外部数据记录</el-button>
  <el-button @click="saveChartDesignerMainData('container_cd8_main')">保存数据</el-button>
  <el-button @click="cleanPiniaCacheDataAndCanvas('container_cd8_main')"  style="margin-right: 50px">清除画布</el-button>
  <el-text>本样例可以调试BI模板；分5步：   1.加载json格式的BI模板    2.加载BI模板需要的外部数据集json   3.加载BI模板渲染需要的数据   4.保存数据   5.切换BI预览，点击预览</el-text>
  <el-dialog v-model="dialogFormVisible_template" title="加载新BI模板" width="1980">
    <el-form :model="form" label-width="auto" style="max-width: 1860px"><br>
      <el-form-item label="designer.getSaveData()">
        <el-input v-model="form.cdTemplateData" type="textarea" rows="20" clearable
                  class="scrollable-textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible_template = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmitConfig">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogFormVisible_datasetList" title="加载外部数据集" width="1980">
    <el-form :model="form" label-width="auto" style="max-width: 1860px"><br>
      <el-form-item label="onUpdateDatasetList">
        <el-input v-model="form.onUpdateDatasetList" type="textarea" rows="20" clearable class="scrollable-textarea"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible_datasetList = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmitDatasetList">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogFormVisible_datas" title="加载外部数据记录" width="1980">
    <el-form :model="form" label-width="auto" style="max-width: 1860px"><br>
      <el-form-item label="json">
        <el-input v-model="form.onUpdateData" type="textarea" rows="20" clearable
                  class="scrollable-textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible_datas = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmitDataset">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>


  <div id="container_cd8_main" style="width: 100%; height: 1024px"></div>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {$bus} from "@/bus/index.js"
import {queryonUpdateDataFrom} from "@/utils/onUpdateDataUtils.js";

const dialogFormVisible_template = ref(false)
const dialogFormVisible_datasetList = ref(false)
const dialogFormVisible_datas = ref(false);
let option = { //参数配置说明 根据您的需求填写option
  uploadImage: { //上传图片相关信息 如果不传该字段时，设计器用到的所有上传图片配置项均不显示。
    server: "url",//上传图片地址
    method: "post",//上传图片请求方式
    headers: { //上传图片请求头
      "Authorization": "Token XXXXXXXX"
    },
    fieldName: "file",
    resultField: "file"
  },
  pageData: { //画布初始化时的宽高
    width: '1920px',
    height: '1080px'
  },
  dataSet: [ //数据集按钮的方式
    { //Json数据
      id: 1,
      value: "新建Json数据集"
    },
    { //http请求数据
      id: 2,
      value: "新建Http接口数据集"
    },
    { //API服务数据
      id: 3,
      value: "API服务数据集"
    },
    {
      id: 4,
      value: "外部数据集"  //  新建一个新的报表实例，如果希望可以预先动态从后台提供几个数据集供其使用，这个配置必须有；
      // 然后只要动态的从后台拿到n个数据集，全部用 results格式装配，onUpdateDatasetList方法来触发
    }
  ]
}
let _onUpdateDatasetList = [];//存放所有的外部数据集
const onUpdateDatasetList = () => {
  console.log("..._onUpdateDatasetList:", _onUpdateDatasetList);
  return new Promise((resolve, reject) => {
    resolve(_onUpdateDatasetList);
  })
}
option.onUpdateDatasetList = onUpdateDatasetList

let _onUpdateData = [];//存放所有的数据记录---这里是指外部数据集的记录
const onUpdateData = (datasets, params) => {
  return new Promise((resolve, reject) => {
    console.log("...datasets:", datasets);
    console.log("...params:", params);
    console.log("..._onUpdateData:", _onUpdateData);
    resolve(queryonUpdateDataFrom(datasets, params, _onUpdateData));
  })
}
option.onUpdateData = onUpdateData

let chartdesiger;
let _biTemplate;
onMounted(() => {
  try {
    chartdesiger = new XZChartDesigner("#container_cd8_main", option);
    $bus.on('cd8_main_preview', (previewcall) => {
          console.log('...container_cd8_main.vue..$bus.on')
          let config = chartdesiger.getSaveData().config;
          let dataConfig = chartdesiger.getSaveData().data.dataConfig;
          previewcall(config, dataConfig, _onUpdateDatasetList, _onUpdateData);
        }
    )
  } catch (e) {
    console.log(".....onMounted throw error:", e);
  }
})

const form = reactive({
  cdTemplateData: reactive([]),
  onUpdateDatasetList: reactive([]),
  onUpdateData: reactive([])
})

const onSubmitConfig = () => {
  if (form.cdTemplateData && form.cdTemplateData.length > 0) {
    _biTemplate = JSON.parse(form.cdTemplateData);
    loadData();
  }
  dialogFormVisible_template.value = false;
}
const onSubmitDatasetList = () => {
  if (form.onUpdateDatasetList && form.onUpdateDatasetList.length > 0) {
    console.log("...cd8_main  onSubmitDatasetList...")
    _onUpdateDatasetList = JSON.parse(form.onUpdateDatasetList);
  }
  dialogFormVisible_datasetList.value = false;
}
const onSubmitDataset = () => {
  if (form.onUpdateData && form.onUpdateData.length > 0) {
    console.log("...cd8_main  onSubmitDataset...")
    _onUpdateData = JSON.parse(form.onUpdateData);
  }
  dialogFormVisible_datas.value = false;
}
const loadData = () => {
  try {//画布设计器的数据回显
    document.getElementById("container_cd8_main").innerHTML = "";//不可以缺少?。
    chartdesiger = new XZChartDesigner("#container_cd8_main", option, _biTemplate)//内部包含了json数据集的记录
  } catch (e) {
    console.log("-------;error...", e);
  }

}

function saveChartDesignerMainData(chartDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置

  let config = chartdesiger.getSaveData().config;
  let dataConfig = chartdesiger.getSaveData().data.dataConfig;//json数据集和记录，外部数据集和null记录
  console.log("config:", config);
  console.log("dataConfig:", dataConfig);
}


function cleanPiniaCacheDataAndCanvas(chartDesignerPreviewId) {
  try {
    document.getElementById("container_cd8_main").innerHTML = "";//不可以缺少，因为点击preview时候，config是有可能变了。
    chartdesiger = new XZChartDesigner("#container_cd8_main", option);
  } catch (e) {
    console.log(".....cleanPiniaCacheDataAndCanvas:", e);
  }
}
</script>
